<template>
	<view class="">
		<view class="mt24 bgf br12 ptb24">
			<view class="tc c3 fw600 fs32">
				<view class="" v-if="order_details.status==0">待支付</view>
				<view class="" v-if="order_details.status==1">待投放</view>
				<view class="" v-if="order_details.status>1 && order_details.status < 7">清洗中</view>
				<view class="" v-if="order_details.status==7">待取货</view>
				<view class="" v-if="order_details.status==8">已完成</view>
			</view>
			<view class="flex_y mt14 fs24 fw600 c2a7" v-if="order_details.status==0">
				<view class="">剩余支付时间</view>
				<view class="mlr10 cf0">
					<u-count-down :time="order_details.countDown" format="mm:ss" autoStart @change="changeTime"
						@finish.stop='finish'>
						<view class="">
							<text class="">{{ timeData.minutes }}:</text>
							<text class="">{{ timeData.seconds }}</text>
						</view>
					</u-count-down>
				</view>
				<view class="">(超过15分钟未支付订单将自动取消)</view>
			</view>
			<view class="mt14 fs24 fw600 c2a7 tc" v-if="order_details.status==1">将尽快将您的物品寄存至服务点</view>
			<view class="mt14 fs24 fw600 c2a7 tc" v-if="order_details.status>1 && order_details.status < 7">
				您的物品正在清洗中，请耐心等待</view>
			<view class="mt14 fs24 fw600 c2a7 tc" v-if="order_details.status==7">您的商品已清洗完毕,请前往门店取货</view>
			<view class="mt14 fs24 fw600 c2a7 tc" v-if="order_details.status==8">感谢惠顾,祝您生活愉快！</view>
		</view>

		<view class="mt24 ptb24 bgf br12 flex_ard">
			<view class="flex_col flex_x" v-if="type == 1">
				<image class="img50" src="/static/my/user/order/ljzf.png" mode=""></image>
				<view class="mt4 c3 fw600 fs28">立即支付</view>
			</view>
			<!-- 			<view class="flex_col flex_x" v-if="type == 2">
				<image class="img50" src="/static/my/user/order/chm.png" mode=""></image>
				<view class="mt4 c3 fw600 fs28">存货码</view>
			</view> -->
			<view class="flex_col flex_x" v-if="order_details.status==7">
				<image class="img50" src="/static/my/user/order/chm.png" mode=""></image>
				<view class="mt4 c3 fw600 fs28">取货码</view>
			</view>
			<view class="flex_col flex_x" v-if="order_details.status==8">
				<image class="img50" src="/static/my/user/order/ljzf.png" mode=""></image>
				<view class="mt4 c3 fw600 fs28">再次购买</view>
			</view>
			<view class="flex_col flex_x" @click="callTel">
				<image class="img50" src="/static/my/user/order//lxsj.png" mode=""></image>
				<view class="mt4 c3 fw600 fs28">联系商家</view>
			</view>
		</view>

		<view class="mt24 bgf br12 p2432">
			<view class="c3 fw600 fs30 mb40">{{order_details.shop.title}}</view>
			<view class="">
				<goodsList :list='goods_list' :count='count'></goodsList>
			</view>
		</view>

		<view class="mt24 bgf br12 p2432">
			<view class="c3 fw600 fs30">取货信息</view>
			<view class="cut_line mtb24"></view>
			<view class="flex_btw mb24">
				<view class="c9 fw600 fs30 left">取货方式</view>
				<view class="c3 fw600 fs30">到店取货</view>
			</view>
			<view class="flex_btw mb24" v-if="order_details.status==8">
				<view class="c9 fw600 fs30 left">取货时间</view>
				<view class="c3 fw600 fs30">{{order_details.picktime}}</view>
			</view>
			<view class="flex btw">
				<view class="c9 fw600 fs30 left">收货地址</view>
				<view class="c3 fw600 fs30 flex1 ml100 tr">
					{{order_details.address.contact}}{{order_details.address.telephone}}
					{{order_details.address.province}}{{order_details.address.city}}
					{{order_details.address.district}}{{order_details.address.address}}
				</view>
			</view>
			<view class="flex btw mt24" v-if="type == 2 || type == 4 || type == 5">
				<view class="c9 fw600 fs30 left">备注 </view>
				<view class="c3 fw600 fs30 flex1 ml100 tr">
					{{order_details.content}}
				</view>
			</view>
		</view>

		<view class="mt24 bgf br12 p2432 mb40">
			<view class="c3 fw600 fs30">订单信息</view>
			<view class="cut_line mtb24"></view>
			<view class="flex_btw mb24">
				<view class="c9 fw600 fs30">订单编号</view>
				<view class="flex_x">
					<view class="c3 fw600 fs30 mr12">{{order_details.sn}}</view>
					<image @click="copy" class="img32" src="/static/my/user/order/copy.png" mode=""></image>
				</view>
			</view>
			<view class="flex_btw">
				<view class="c9 fw600 fs30">下单时间</view>
				<view class="c3 fw600 fs30">{{order_details.canceltime_text}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import tool from '../../../../utils/tool/tool.js'
	export default {
		components: {},
		data() {
			return {
				id: '', //订单id
				order_details: '', //订单详情
				goods_list: [], //订单商品
				count: 0, //订单商品数量
				timeData: {},
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			this.orderInfo()
		},
		onShow() {

		},
		methods: {
			orderInfo() { //订单详情
				this.$api.orderInfo({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						res.data.goods.map(item => {
							item.goods = {
								id: item.goods_id,
								image_str: item.image_str,
								price: item.goods_price,
								title: item.goods_name,
							}
							item.num = item.goods_num
						})

						let time = new Date().getTime()
						res.data.countDown = res.data.endtime_text * 1000 - time
						this.goods_list = res.data.goods
						this.count = res.data.total
						this.order_details = res.data
					}
				})
			},
			changeTime(e) { //倒计时 
				this.timeData = e
			},
			finish() { //倒计时结束
				this.$store.commit('save_user_order_active', 1)
				this.$toast.toast('支付失效，请重新下单', () => {
					this.$store.commit('save_user_order_active', 0)
					uni.switchTab({
						url: '/pages/share/order/order'
					})
				})
			},
			callTel() { //拨打电话
				uni.makePhoneCall({
					phoneNumber: this.order_details.shop.mobile //拨打电话
				});

			},
			copy() { //复制订单号
				tool.copyText(this.order_details.sn)
			}
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.left {
		width: 120upx;
	}
</style>
